<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>theme</title>
<link rel="stylesheet" href="style.css">
<h1>主题</h1>

<h5>1. 定制皮肤和布局</h5>
<p>
	皮肤和布局都是css文件，本质上功能是相同的，但为了定制方便，人为将它们分为了两个文件。<br/>
	皮肤主管界面各元素的样式，比如圆角、阴影、背景、字体、颜色等<br/>
	布局主管界面各元素的大小、位置和动画时长，原则上不应包含图片文件（归皮肤管）。<br/>
	皮肤放在theme/skin文件夹，皮肤附带的图片建议放在theme/skin/image文件夹内。布局放在theme/layout文件夹。
</p>
<p>
	举例：将默认主题的圆角变大些
	<ol>
		<li>想一个皮肤的名称，比如round</li>
		<li>进入theme/skin文件夹，将default.css复制一份，将名称为round.css</li>
		<li>打开round.css，把通用样式的第四行border-radius后面的8px改为16px，保存</li>
		<li>打开config.js，将skin后的'default'，改为'round'<br/><br/>
<pre>
config{
	...
	skin:'round',
	...
}
</pre>
		</li>
	</ol>
	
</p>

<h5>2. 定制背景</h5>
<p>
背景既可以由皮肤决定，也可以在config.js中自行更换。皮肤可以控制两层背景，一层是html，一层是body，可以形成叠加。而在config.js中设置的背景只能有一层，且只能是jpg格式。
</p>
<p>
	<ol>
		<li>将喜欢的图片放在theme/background文件夹下，比如game.jpg</li>
		<li>打开config.js，修改background一项，如果想图片自动适应宽度，则填入['game','stretch']，若不希望图片自动缩放，则填入['game']<br/><br/>
<pre>
config{
	...
	background:['game','stretch'],
	...
}
</pre>
		</li>
	</ol>
</p>

<h5>3. 定制图片包</h5>
<p>
	自定义图片包可以控制卡牌或图片的背景，放在theme/image文件夹下，并在config.js中开启。开启后自动将替换同名的默认文件<br/>
	角色的图片只能是jpg格式，卡牌的图片只能是png格式
</p>
<p>
	举例：修改曹操、杀的卡牌图片
	<ol>
		<li>想一个图片包的名称，比如sketch</li>
		<li>进入theme/image文件夹，创建一个名为sketch的文件夹，并在sketch文件夹内创建名称分别为character、card的两个文件夹</li>
		<li>将caocao.jpg放在character文件夹，sha.png放在card文件夹</li>
		<li>打开config.js，将image一项后面的'default'，改为'sketch'<br/><br/>
<pre>
config{
	...
	image:'sketch',
	...
}
</pre>
		</li>
	</ol>
	
</p>